<template>
  <div id="orderStatistics">
    <!--内容头部  start-->
    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>报表统计</el-breadcrumb-item>
        <el-breadcrumb-item>订单量统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--筛选条件 start-->
    <div class="condition-wrap">
      <el-form label-width="150px">
        <!-- <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="工程师：">
              <el-select v-model="engineerId" placeholder="请选择" :clearable="true">
                <el-option v-for="item in enginnerlist" :label="item.name" :value="item.No" :key="item.No"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </el-col>
        </el-row> -->
      </el-form>
    </div>
    <!--图表 start-->
    <div class="gird-wrap">
      <el-row :gutter="20" style="width:100%;">
        <el-col :span="18" :offset="3">
          <div class='option-wrap' style="margin-bottom: 10px;">
            <el-radio-group v-model="timeTab" @change="handleTimeChange">
              <el-radio-button label="月"></el-radio-button>
              <!-- <el-radio-button label="年"></el-radio-button> -->
            </el-radio-group>
          </div>
          <div class="echarts" id="orderNumber"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import r from '../utils/RequestUtil'
  import wxs from '../utils/WxsService'
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')

  export default {
    name: 'orderStatistics',
    components: {
      echarts
    },
    data() {
      return {
        engineerId: null,
        enginnerlist: [],
        orderQuantityList: [],
        datalist: {
          orderQuantityXAxisList: [],
          orderQuantityYAxisList: []
        },
        timeTab: '月'
      }
    },
    methods: {
      getEnginnerlistData() {
        this.enginnerlist = wxs.getAllEngieer();
        this.engineerId = this.enginnerlist[0].No;
      },
      getData() {
        let vm = this;
        let No = vm.engineerId;
        // if (vm.timeTab == '月') {
        // } else if (vm.timeTab == '年') {
        // }

        this.orderQuantityList = wxs.getToMonthNumber();
        if (this.orderQuantityList != null & this.orderQuantityList != "") {
          let follow = this.orderQuantityList;
          this.datalist.orderQuantityXAxisList.push(follow.datelist);
          this.datalist.orderQuantityYAxisList.push(follow.numberList);
        }
        let myChart = echarts.init(document.getElementById('orderNumber'));
        myChart.setOption({
          title: {
            text: '订单量统计',
            subtext: '维修工程师'
          },
          tooltip: {},
          toolbox: {
            show: false,
            feature: {
              dataView: {
                readOnly: false
              },
              magicType: {
                type: ['line', 'bar']
              },
            }
          },
          xAxis: {
            name: '日期',
            type: 'category',
            boundaryGap: false,
            splitLine: {
              show: false
            },
            axisTick: {
              length: 6,
              lineStyle: {
                type: 'dashed'
                // ...
              },
            },
            axisTick: {
              alignWithLabel: true
            },
            data: vm.datalist.orderQuantityXAxisList
          },
          yAxis: {
            name: '单',
            type: 'value',
            axisTick: {
              length: 6,
              lineStyle: {
                type: 'dashed'
                // ...
              },
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          series: [{
            type: 'bar',
            data: vm.datalist.orderQuantityYAxisList,
            label: {
              show: true,
              position: 'bottom',
              textStyle: {
                fontSize: 20
              }
            },
            smooth: true
          }],
          color: ['#8cd5ed']
        });
        vm.datalist.orderQuantityXAxisList = new Array(0);
        vm.datalist.orderQuantityYAxisList = new Array(0);
        // });
      },
      handleSearch() {
        if (this.engineerId != null & this.engineerId != "") {
          this.getData();
        } else {
          r.message('请您选择工程师！', 'warning')
        }
      },
      handleTimeChange() {
        if (this.engineerId != null & this.engineerId != "") {
          this.getData();
        } else {
          r.message('请您选择工程师！', 'warning')
        }
      }
    },
    mounted() {
      this.getEnginnerlistData();
      this.getData();
    }
  }

</script>

<style scoped>
  .echarts {
    width: 100%;
    height: 450px;
  }

</style>
